<template>
  <div style="width: 50%" v-show="div1Show">
    <el-form label-width="auto">
      <el-form-item label="用户名">
        <el-input v-model="username" :disabled="inputDisabled"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="email" :disabled="inputDisabled"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="phone" :disabled="inputDisabled"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="changeInfo"
          v-show="inputDisabled"
          style="margin-left: 25%"
          >修改个人信息</el-button
        >
        <el-button type="primary" @click="submit" v-show="!inputDisabled" style="margin-left: 35%"
          >保存</el-button
        >
        <el-button type="primary" @click="changePassword" v-show="inputDisabled"
          >修改密码</el-button
        >
      </el-form-item>
    </el-form>
  </div>
  <div style="width: 50%" v-show="div2Show">
    <el-form label-width="auto">
      <el-form-item label="原密码">
        <el-input v-model="prePassword"></el-input>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input v-model="newPassword"></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="confirmPassword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit" style="margin-left: 25%">确定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import myAxios from '../../axios/myAxios'
import { ElMessage } from 'element-plus'
import { useUserStore } from '../../stores/userStore'
const userStore = useUserStore()
const username = ref(userStore.userInfo.name)
const email = ref(userStore.userInfo.email)
const phone = ref(userStore.userInfo.phone)
const inputDisabled = ref(true)
const div1Show = ref(true)
const div2Show = ref(false)
const changePassword = () => {
  div1Show.value = !div1Show.value
  div2Show.value = !div2Show.value
  inputDisabled.value = !inputDisabled.value
}
const changeInfo = () => {
  inputDisabled.value = !inputDisabled.value
}

const prePassword = ref('')
const newPassword = ref('')
const confirmPassword = ref('')
const submit = () => {
  if (div1Show.value) {
    myAxios
      .put('/user/update', {
        id: userStore.userInfo.id,
        username: username.value,
        email: email.value,
        phone: phone.value,
      })
      .then((res) => {
        if (res.data.code === 200) {
          userStore.setUserInfo({
            id: userStore.userInfo.id,
            name: username.value,
            password: userStore.userInfo.password,
            email: email.value,
            phone: phone.value,
            role: userStore.userInfo.role,
          })
          ElMessage.success('修改成功！')
          inputDisabled.value = !inputDisabled.value
        } else {
          ElMessage.error('修改失败！')
        }
      })
  } else {
    if (newPassword.value !== confirmPassword.value) {
      ElMessage.error('两次密码不一致！')
    } else if (prePassword.value !== userStore.userInfo.password) {
      ElMessage.error('原密码错误！')
    } else {
      myAxios
        .put('/user/update', {
          id: userStore.userInfo.id,
          password: newPassword.value,
        })
        .then((res) => {
          if (res.data.code === 200) {
            ElMessage.success('修改成功！')
            userStore.setUserInfo({
              id: userStore.userInfo.id,
              name: username.value,
              password: userStore.userInfo.password,
              email: email.value,
              phone: phone.value,
              role: userStore.userInfo.role,
            })
            inputDisabled.value = !inputDisabled.value
            div1Show.value = !div1Show.value
            div2Show.value = !div2Show.value
          } else {
            ElMessage.error('修改失败！')
          }
        })
    }
  }
}
</script>
